<template>
  <div class="dashboard-container" >
    <h1>个人信息管理</h1>

      <el-form :rules="roles" label-width="20%" :model="updateList" ref="ruleForm">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="updateList.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="updateList.idCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassWord">
          <el-input v-model="updateList.userPassWord" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateList.remark" maxlength="50" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
         <el-button  type="primary" style="margin-left: 40%;width: 100px" @click="update('ruleForm')">保存</el-button>
          <el-button  type="primary" style="margin-left: 40px;width: 100px"  @click="selectUser('ruleForm')">重置</el-button>
      </span>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import {insertUser, selectAllUser, updateUser} from "@/api/user";

export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data(){
    return{
      userId1: this.$store.getters.userId,
      userName1: this.$store.getters.userName,
      roleName1: this.$store.getters.roleName,


      updateButtonController:false,
      updateList:{
        userTableId:'',
        userId:'',
        userName:'',
        userPassWord:'',
        sex:'',
        phoneNumber:'',
        idCard:'',
        remark:''
      },
      deleteButtonController:false,
      deleteUserId:'',

      roles:{
        userName: [
          {required:true,trigger:'blur',message:'用户名不能为空'},
          {min:1,max:11,message: '长度在1到11个数字',trigger: 'blur'}
        ],
        phoneNumber:[
          {required:true,trigger:'blur',message:'手机号不能为空'},
          {min:11,max:11,message: '请输入11位手机号',trigger: 'blur'}
        ],
        idCard:[
          {required:true,trigger:'blur',message:'身份证号不能为空'},
          {min:18,max:18,message: '请输入18位身份证号',trigger: 'blur'}
        ],
        userPassWord:[
          {required:true,trigger:'blur',message:'密码不能为空'},
          {min:6,max:20,message: '长度在1到20个字符',trigger: 'blur'}
        ],
        sex:[
          {required:true,trigger:'blur',message:'性别不能为空'},
        ],
      }
    }
  },
  // 页面初始化时加载的方法
  mounted() {
    this.selectUser()
  },
  // 页面的方法和事件
  methods:{
    selectUser(){
      selectAllUser({
        userId:this.userId1,
        userName:this.userName1,
        roleName:this.roleName1
      }).then(
        response => {
          console.log(response)
          this.updateList=response.data[0]

        }
      )
    },


    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser({
            userTableId:this.updateList.userTableId,
            userId:this.updateList.userId,
            roleId:this.updateList.roleId,
            userName:this.updateList.userName,
            userPassWord:this.updateList.userPassWord,
            phoneNumber:this.updateList.phoneNumber,
            idCard:this.updateList.idCard,
            sex:this.updateList.sex,
            remark:this.updateList.remark,
          }).then(
            response => {
              this.$message.success('修改成功')
              // 再次调用getInfo方法，使用全局变量，刷新页面
              this.$store.dispatch('user/getInfo')
              this.selectUser()
            }
          )
        } else {return false;}});},

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
